<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实现简单本地存储公共方法封装</title>
    <style>
        .input1{
            width:30%;
            height:30px;
            text-indent: 10px;
            font-size: 14px;
        }
        .button{
            background:rgb(20, 105, 233);
            border:none;
            color:#dce9fd;
            padding:5px 10px;
            border-radius: 4px;
            margin-right:15px;
            cursor: pointer;
            outline: none;
        }
        .default{
            background:#cecece;
            color:rgb(100, 100, 100);
        }
        .ul{
            width:50%;
        }
        .del{
            float:right;
            cursor: pointer;
        }
        .h3{
            font-weight: normal;
            border-bottom:1px solid gray;
            line-height:35px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div id="content">
        <p>
            <input v-model="inputValue" type="text" class="input1" placeholder="请输入要存储的内容">
        </p>
        <p>
            <button class="button" type="button" @click="add">确定</button>
            <button class="button default" type="button" @click="delAllData">删除所有数据</button>
            <button class="button default" type="button" @click="clearAllData">清空所有本地数据</button>
        </p>
        <h3 class="h3">已添加内容如下：</h3>
        <ul class="ul">
            <li v-for="(v, index) in list"><span class="del" @click="delData(v)">删除</span>{{v}}</li>
        </ul>
    </div>

    <script src="../date/Utils.js"></script>
    <script>

        var storage = new Vue({
            el:"#content",
            data:{
                storageName:'test1',    //本地存储key名
                inputValue:null,    //用户输入内容
                list:[],    //已添加数据
            },
            mounted(){
                //初始化本地存储
                utils.init(this.localCallback);
                //初始化数据
                this.init();
            },
            methods:{
                //操作本地存储后的回调函数
                localCallback(e){
                    let l = this.getData();
                    console.log(l);
                },
                //初始化
                init(){
                    let old_data = utils.getStorage(this.storageName);
                    if(old_data != null && old_data instanceof Array){
                        this.list = old_data;
                    }
                },
                //新增
                add(){
                    if(this.inputValue == null){alert("请输入内容！");return false;}
                    let old_data = this.getData();
                    console.log(old_data != null && old_data instanceof Array);
                    if(old_data != null && old_data instanceof Array){
                        old_data.push(this.inputValue);
                        utils.setStorage(this.storageName, old_data);
                    }else{
                        utils.setStorage(this.storageName, [this.inputValue]);
                    }
                    this.list.push(this.inputValue);
                    this.inputValue = null;
                },
                //获取
                getData(){
                    let l = utils.getStorage(this.storageName);
                    return l;
                },
                //删数据
                delData(v){
                    let old_data = utils.getStorage(this.storageName);
                    if(old_data.length < 1){
                        alert("没有数据要删除");
                        return;
                    }
                    let index = old_data.indexOf(v);
                    if(index != -1){
                        old_data.splice(index, 1);
                        this.list.splice(index, 1);
                        utils.setStorage(this.storageName, old_data);
                    }
                },
                //删除所有数据
                delAllData(){
                    this.list = [];
                    utils.deleteStorage(this.storageName);
                },
                //清空所有本地数据
                clearAllData(){
                    this.list = [];
                    utils.clearStorage();
                }
            }
        });
    </script>
</body>
</html>